import QtQuick 2.0
import QtGraphicalEffects 1.14

import MaskedMouseArea 1.0

Item {
    id:root
    implicitHeight:300
    implicitWidth: 300

//    Rectangle{
//       id:outRec
//       width: 300
//       height: 300
//       border.color: "black"
//       border.width: 1
//       visible: false
//    }

    Image {
       id: name1
       source: "qrc:/img/top.png"
       smooth: true
       antialiasing: true
       anchors.centerIn: parent
       transform: Scale { origin.x: width/2; origin.y: height/2; yScale: .87;xScale: .87}

       MaskedMouseArea {
           anchors.fill: parent
           alphaThreshold: 0.1
           maskSource: parent.source

           onPressed:{
               parent.scale += .1
           }

           onReleased:{
               parent.scale -= .1
           }
        }
    }

    Image {
       id: name2
       source: "qrc:/img/right.png"
       smooth: true
       antialiasing: true
       anchors.centerIn: parent
       transform: Scale { origin.x: width/2; origin.y: height/2; yScale: .87;xScale: .87}

       MaskedMouseArea {
           anchors.fill: parent
           alphaThreshold: 0.1
           maskSource: parent.source

           onPressed: {
               parent.scale += .1
           }

           onReleased: {
               parent.scale -= .1
           }
       }
    }

    Image {
       id: name3
       source: "qrc:/img/bottom.png"
       smooth: true
       antialiasing: true
       anchors.centerIn: parent
       transform: Scale { origin.x: width/2; origin.y: height/2; yScale: .87;xScale: .87}

       MaskedMouseArea {
           anchors.fill: parent
           alphaThreshold: 0.1
           maskSource: parent.source

           onPressed: {
               parent.scale += .1
           }

           onReleased: {
               parent.scale -= .1
           }
       }
    }

    Image {
       id: name4
       source: "qrc:/img/left.png"
       smooth: true
       antialiasing: true
       anchors.centerIn: parent
       transform: Scale { origin.x: width/2; origin.y: height/2; yScale: .87;xScale: .87}

       MaskedMouseArea {
           anchors.fill: parent
           alphaThreshold: 0.1
           maskSource: parent.source

           onPressed: {
               parent.scale += .1
           }

           onReleased: {
               parent.scale -= .1
           }
       }
    }

    Image {
       id: name5
       source: "qrc:/img/restore.svg"
       smooth: true
       antialiasing: true
       anchors.centerIn: parent
       anchors.horizontalCenterOffset: 2
       anchors.verticalCenterOffset: -3
       //transform: Scale { origin.x: width/2; origin.y: height/2; yScale: .87;xScale: .87}

       MaskedMouseArea{
           anchors.fill: parent
           alphaThreshold: 0.1
           maskSource: parent.source

           onPressed: {
               parent.scale += .1
           }

           onReleased: {
               parent.scale -= .1
           }
       }
    }
}
